<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>openUBMC CI LOG</title>
    <script src="{{js_url}}" type="text/javascript"></script>
    <style>
        :root {
            --primary-color: #333;
            --border-color: #ccc;
            --active-border: #000;
            --text-gray: #666;
        }

         .nav-item[href="N/A"] {
             display: none !important;
             pointer-events: none;
             cursor: default;
         }

        body {
            margin: 0;
            padding: 8px;
            font-family: system-ui, -apple-system, sans-serif;
        }

        .nav {
            display: flex;
            gap: 24px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-color);
        }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 8px 0;
            position: relative;
            transition: opacity 0.2s ease;
        }

        .nav-item::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 2px;
            background: transparent;
            transition: background 0.3s ease;
        }

        .nav-item.active::after {
            background: var(--active-border);
        }

        .status {
            color: var(--text-gray);
            font-size: 0.9em;
        }

        .nav-link {
            color: var(--primary-color);
            text-decoration: none;
            font-size: 0.875rem;
        }

        .log-container {
            margin-top: 12px;
            height: calc(100vh - 80px);
        }

        .log-content {
            width: 99%;
            height: 100%;
            padding: 8px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-family: monospace;
            white-space: pre-wrap;
            overflow: auto;
            background: #f8f8f8;
        }
    </style>
</head>

<body>
<nav class="nav">
    <a href="{{ut_url}}" class="nav-item" data-tab="ut">
        <div class="status">{{ut_status}}</div>
        <span class="nav-link">UT测试日志</span>
    </a>
    <a href="{{it_url}}" class="nav-item" data-tab="it">
        <div class="status">{{it_status}}</div>
        <span class="nav-link">IT测试日志</span>
    </a>
    <a href="{{coverage_url}}" class="nav-item" data-tab="coverage">
        <div class="status">{{coverage_status}}</div>
        <span class="nav-link">测试覆盖率日志</span>
    </a>
    <a href="{{build_ur}}" class="nav-item" data-tab="build">
        <div class="status">{{build_status}}</div>
        <span class="nav-link">编译构建日志</span>
    </a>
    <a href="{{vc_url}}" class="nav-item" data-tab="vc">
        <div class="status">{{vc_status}}</div>
        <span class="nav-link">版本校验日志</span>
    </a>
    <a href="{{ipmi_url}}" class="nav-item" data-tab="ipmi">
        <div class="status">{{ipmi_status}}</div>
        <span class="nav-link">IPMI修改日志</span>
    </a>
    <a href="{{dependency_url}}" class="nav-item" data-tab="dependency">
        <div class="status">{{dependency_status}}</div>
        <span class="nav-link">依赖与接口检查日志</span>
    </a>
    <a href="{{line_url}}" class="nav-item" data-tab="line">
        <div class="status">{{line_status}}</div>
        <span class="nav-link">修改行数检查日志</span>
    </a>
    <a href="{{model_check_url}}" class="nav-item" data-tab="model_check">
        <div class="status">{{model_check_status}}</div>
        <span class="nav-link">模型检查日志</span>
    </a>
    <a href="{{header_check_url}}" class="nav-item" data-tab="header">
        <div class="status">{{header_status}}</div>
        <span class="nav-link">文件头检查日志</span>
    </a>
    <a href="{{smoke_test_url}}" class="nav-item" data-tab="header">
        <div class="status">{{smoke_test_status}}</div>
        <span class="nav-link">冒烟检查日志</span>
    </a>
</nav>

<div class="log-container">
    <pre class="log-content">{{log}}</pre>
</div>

<script>
    (function() {
        function highlightActiveTab() {
            const path = window.location.pathname;
            const validTabs = document.querySelectorAll('.nav-item:not([href="N/A"])');
            let activeFound = false;

            validTabs.forEach(tab => {
                const link = tab.getAttribute('href');
                if (link.includes(path)) {
                    tab.classList.add('active');
                    activeFound = true;
                } else {
                    tab.classList.remove('active');
                }
            });

            // 默认激活第一个有效项
            if (!activeFound && validTabs.length > 0) {
                validTabs[0].classList.add('active');
            }
        }

        document.querySelector('.nav').addEventListener('click', function(e) {
            const navItem = e.target.closest('.nav-item:not([href="N/A"])');
            if (!navItem) {
                e.preventDefault();
                return;
            }

            highlightActiveTab();
        });

        window.addEventListener('DOMContentLoaded', () => {
            highlightActiveTab();
        });
    })();
</script>
</body>
</html>